<div class="w-full h-full flex flex-col pb-4 self-stretch relative">
    <ngm-tree-table class="w-full h-full overflow-auto rounded-xl"
        [data]="groupTree$ | async"
        [columns]="[
            {
                name: 'action',
                caption: 'PAC.KEY_WORDS.ACTION' | translate: {Default: 'Action'},
                cellTemplate: actionTempl
            }
        ]"
        [nameLabel]=" 'PAC.MODEL.Name' | translate: {Default: 'Name'} "
        [displayDensity]="DisplayDensity.compact"
        [nameCellTemplate]="nameTempl"
        [initialLevel]="1000"
        [stickyHeaders]="true"
        >
    </ngm-tree-table>

  @if (loading()) {
    <ngm-spin class="absolute top-0 left-0 w-full h-full"/>
  }
</div>

<ng-template #nameTempl let-key="key" let-name="name" let-item="raw">
    <div class="inline-flex items-center whitespace-nowrap">
        <a [routerLink]="['./', key]" ><span>{{name}}</span></a>
    </div>
</ng-template>

<ng-template #actionTempl let-item="raw">
    <div class="flex justify-start items-center gap-2">
        <button mat-icon-button displayDensity="cosy" class="text-slate-500"
            (click)="editBusinessArea(item)">
            <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
        </button>

        <button mat-icon-button displayDensity="cosy" class="text-slate-500"
            (click)="addBusinessArea(item)">
            <mat-icon fontSet="material-icons-outlined">add</mat-icon>
        </button>
        
        <button mat-icon-button ngmAppearance="danger" displayDensity="cosy" class="text-slate-500"
            (click)="deleteBusinessArea(item)">
            <mat-icon fontSet="material-icons-outlined">remove</mat-icon>
        </button>
    </div>
</ng-template>
